<template>
  <el-card>
    <div slot="header" class="header">
      <div class="search-header">
        <span>线上热门搜索</span>
        <el-dropdown>
          <span>
            <i class="el-icon-more"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>黄金糕</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
            <el-dropdown-item>螺蛳粉</el-dropdown-item>
            <el-dropdown-item>双皮奶</el-dropdown-item>
            <el-dropdown-item>蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div>
      <LineCharts></LineCharts>

      <!-- <el-col :span="12">
          <LineChart></LineChart>
        </el-col> -->

      <!-- table表格 -->
      <el-table :data="pageList" style="width: 100%" border>
        <el-table-column label="排名" width="80" type="index">
        </el-table-column>
        <el-table-column label="搜搜关键字" prop="word" width="180">
        </el-table-column>
        <el-table-column label="用户数" prop="user" sortable> </el-table-column>
        <el-table-column label="搜索量" prop="count" sortable>
        </el-table-column>
      </el-table>
      <!-- 分页去 -->
      <el-pagination
   
      :current-page="page"
      :page-sizes="[3, 5, 10]"
      :page-size="limit"
      layout="total,prev, pager, next, jumper,->, sizes"
      :total="searchWord.length"
      @current-change="getpageList"
      @size-change="handleSizeChange"
    >
    </el-pagination>
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
import { mapState } from 'vuex'
import LineCharts from './lineCharts'

export default {
  name: '',
  data() {
    return {
      pageList: [],
      page: 1,
      limit: 4 //每一页展示数据个数
    }
  },
  components: {
    LineCharts
  },

  mounted() {
    this.$nextTick(() => {
      this.getpageList(1) //也可以用settimeout
      //   this.getSubCategoryDetail("pop");
      //   this.getSubCategoryDetail("new");
      //   this.getSubCategoryDetail("sell");
    })
    setTimeout(() => {
      this.getpageList(1)
    }, 200)
  },
  computed: {
    ...mapState({
      searchWord: (state) => state.Home.list.searchWord || []
    })
  },
  methods: {
    getpageList(page) {
      // const newList = this.searchWord
      const pageList = []
      const { limit } = this
      if (this.searchWord.length) {
        for (let i = (page - 1) * limit; i < page * limit; i++) {
          pageList.push(this.searchWord[i])
          console.log('faqin', page)
        }
      }
      console.log(pageList)
      this.pageList = pageList
    },
    handleSizeChange(pageSize) {
      this.limit = pageSize
      this.getpageList(1)
    }
  }
}
</script>

<style scoped>
.header {
  border-bottom: 1px solid #eee;
  padding: 5px 0px;
}
.search-header {
  display: flex;
  justify-content: space-between;
}
.pagination {
  float: right;
}
</style>
